<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
		<title>Vue 组件嵌套</title>
	</head>
	<body>
		
		<div id = "app-one">
			<my-header>
				<my-title></my-title>
			</my-header>
		</div>
		<br />
		
		<div id = "app-two">
			<my-header>
				<button slot = "left-a"><-</button>
				<button slot = "right-b">-></button>
			</my-header>
		</div>
	
	<script>
		var vm = new Vue({
			el: "#app-one",
			components: {
				"my-header": {
					// 组件嵌套关键代码是：<slot /> 占位符
					template: "<div style='border: solid 1px orangered'>我是<b>头部</b>内容！<slot /></div>"
				},
				"my-title": {
					template: "<div>我是标题内容！</div>"
				}
			}
		});
		
		var vm = new Vue({
			el: "#app-two",
			components: {
				"my-header": {
					template: '<div><slot name = "left-a" />我是头部内容！<slot name = "right-b" /></div>'
				}
			}
		})
	</script>
	</body>
</html>